<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
		<title></title>
		<style type="text/css">
			html,
			body {
				margin: 0;
				padding: 0;
				background: #f5f5f5;
				color: #333333;
			}

			.main {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.banner {
				width: 93%;
				height: 42vw;
				border-radius: 2vw;
				overflow: hidden;
				margin: 4.2vw 0;
			}

			.banner img {
				width: 100%;
				height: 100%;
			}

			/* 九宫格 */
			.nav {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				flex-wrap: wrap;
				width: 100%;
				background: white;
				padding: 2vw 0;
			}

			.nav .navLi {
				width: 22%;
				border-radius: 2vw;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.nav .navLi>div:nth-child(1) {
				font-size: 4vw;
				margin-bottom: 1vw;
			}

			.nav .navLi>div:nth-child(2) {
				color: #999999;
				font-size: 3.2vw;
			}

			.nav .navLi img {
				width: 40%;
				margin-bottom: 1vw;
			}
			/* 积分 */
			.integral{
				border-left: 1vw solid #FF4443;
				padding: 1vw 0;
				padding-left: 2%;
				font-size: 3.2vw;
				background: white;
				width: 97%;
				margin-bottom: 4.2vw;
				border-top: 1px solid #f2f2f2;
				color: #FF4443;
			}


			/* 列表 */
			.content {
				width: 93%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.contentList {
				width: 48%;
				background: white;
				border-radius: 2vw;
				overflow: hidden;
				margin-bottom: 4.2vw;
			}

			.contentList>div:nth-child(2) {
				padding: 2.8vw;
			}

			.contentList>div:nth-child(2)>div:nth-child(1) {
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.contentList>div:nth-child(2)>div:nth-child(2) {
				color: #ff4443;
				font-weight: bold;
				font-size: 5vw;
			}
			
			.contentList>div:nth-child(2) span {
				font-size: 3vw;
				margin-left: 0.2vw;
			}

			/* 图片自适应 */
			.jfK1 {
				width: 100%;
				overflow: hidden;
				position: relative;
			}

			.jfK1 .jfImg1 {
				width: 100%;
				height: 100%;
				padding-top: 100%;
				overflow: hidden;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
				-webkit-background-size: cover;
				-moz-background-size: cover;
			}

			.foot {
				width: 100%;
				text-align: center;
				padding: 1.8vw 0;
				font-size: 3.2vw;
				color: #999999;
				background: #f2f2f2f2;
			}
			.loading{
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: rgba(0,0,0,0.1);
				display: flex;
				justify-content: center;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="loading">
				<img src="../imgs/loading-2.gif" >
			</div>
			<script type="text/html" id="banner">
				<img src="{{fileUrl}}" >
			</script>
			<div class="banner"></div>
			<!-- <div class="banner">
				<img src="../imgs/banner1.png" >
			</div> -->
			<div class="nav">
				<div class="navLi jfBtn">
					<img src="../imgs/icon2.png">
					<div>我的积分</div>
				</div>
				<div class="navLi yhqBtn">
					<img src="../imgs/icon1.png">
					<div>我的券包</div>
				</div>
				<div class="navLi ddBtn">
					<img src="../imgs/icon3.png">
					<div>我的订单</div>
				</div>
				<div class="navLi kbBtn">
					<img src="../imgs/icon4.png">
					<div>支付宝卡包</div>
				</div>
			</div>
			<script type="text/html" id="integral">
				<div>当前积分：{{memberIntegral}}</div>
			</script>
			<div class="integral"></div>
			<script type="text/html" id="content">
				{{each}}
					<div class="contentList" deta-id='{{$value.id}}'>
						<div class='jfK1'>
							<div class='jfImg1' style="background-image: url({{$value.fileUrl}})"></div>
						</div>
						<div>
							<div>{{$value.productName}}</div>
							<div>
								{{if $value.amount > 0}}<span><span style="font-size: 5vw;">{{$value.amount}}</span>元{{if $value.amount2 > 0}}+{{/if}}</span>{{/if}}{{if $value.amount2 > 0}}{{$value.amount2}}<span>积分</span>{{/if}}
								{{if $value.amount == 0 && $value.amount2 == 0}}
									<span style="font-size: 3.6vw;">免费领取</span>
								{{/if}}
							</div>
						</div>
					</div>
				{{/each}}
			</script>
			<div class="content"></div>
			<!-- <div class="content">
				<div class="contentList" deta-id='1'>
					<div class='jfK1'>
						<div class='jfImg1' style="background-image: url(../imgs/123123a.jpg)"></div>
					</div>
					<div>
						<div>阿萨大大十分士大夫大师傅</div>
						<div>168.00<span>元</span></div>
					</div>
				</div>
				<div class="contentList">
					<div class='jfK1'>
						<div class='jfImg1' style="background-image: url(../imgs/123123a.jpg)"></div>
					</div>
					<div>
						<div>阿萨大大十分士大夫大师傅</div>
						<div>168.00<span>元</span></div>
					</div>
				</div>
				<div class="contentList">
					<div class='jfK1'>
						<div class='jfImg1' style="background-image: url(../imgs/123123a.jpg)"></div>
					</div>
					<div>
						<div>阿萨大大十分士大夫大师傅</div>
						<div>168.00<span>元</span></div>
					</div>
				</div>
				<div class="contentList">
					<div class='jfK1'>
						<div class='jfImg1' style="background-image: url(../imgs/123123a.jpg)"></div>
					</div>
					<div>
						<div>阿萨大大十分士大夫大师傅</div>
						<div>168.00<span>元</span></div>
					</div>
				</div>
			</div> -->
			<div class="foot">本产品由千狐云提供技术</div>
		</div>
		<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/template-web.js" type="text/javascript" charset="utf-8"></script>
	</body>
	<script type="text/javascript">
		$(function() {

			function GetQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			}
			//console.log(url)
			//console.log(GetQueryString("auth_code"))
			//console.log(GetQueryString("customer_code"))
			//localStorage.setItem('user','啊实打实大苏打');//保存
			//console.log(localStorage.getItem('user'));//取出
			//alert(GetQueryString("auth_code"))
			//alert(GetQueryString("customer_code"))
			//console.log(new Date().getTime())
			// if(localStorage.getItem('getTime')){
			// 	if(new Date().getTime()-localStorage.getItem('getTime')>1000*60*30){
			// 		//console.log('asdasd')
			// 		localStorage.removeItem('getTime')
			// 		localStorage.removeItem('token')
			// 		sessionStorage.getItem()
			// 	}
			// 	// storage.removeItem('getTime')
			// 	// storage.removeItem('token')
			// }
			//console.log(sessionStorage.getItem('token'))
			if (!sessionStorage.getItem('token')) {
				if (GetQueryString("auth_code") && GetQueryString("customer_code")) {
					myAjax('get', '/api/alipay/h5Login', {
						authCode: GetQueryString("auth_code"),
						customerCode: GetQueryString("customer_code")
					}, function(res) {
						if (res.code == 200) {
							sessionStorage.setItem('token', res.data.token); //保存
							//sessionStorage.setItem('getTime', new Date().getTime()); //保存
							//alert('token'+res.data.token)
							myAjax('get', '/api/alipay/getListByType', {
								activityType: 3
							}, function(res) {
								//console.log('asdasd111')
								if (res.code == 200) {
									//console.log(res.data[0].productList)
									//dataJson['data']=res.data[0].productList
									var html = template('banner', res.data.list[0]);
									$(".banner").append(html);
									var html = template('integral', res.data);
									$(".integral").append(html);
									var html = template('content', res.data.list[0].productList);
									$(".content").append(html);
									// var html = template('model1',data1)
									//     $("#point").append(html)
								} else {
									alert(res.data)
								}
							})
						} else {
							alert(res.data)
							//console.log(res.data)
						}
						$('.loading').hide()
					})
				}
			} else {
				myAjax('get', '/api/alipay/getListByType', {
					activityType: 3
				}, function(res) {
					if (res.code == 200) {
						//console.log(res.data[0].productList)
						//dataJson['data']=res.data[0].productList
						var html = template('banner', res.data.list[0]);
						$(".banner").append(html);
						var html = template('integral', res.data);
						$(".integral").append(html);
						var html = template('content', res.data.list[0].productList);
						$(".content").append(html);
						// var html = template('model1',data1)
						//     $("#point").append(html)
					} else {
						alert(res.data)
					}
					$('.loading').hide()
				})
			}




			$('.jfBtn').on('click', function() { //我的积分
				window.location.href = "integral.html";
			})
			$('.yhqBtn').on('click', function() { //我的优惠券
				window.location.href = "coupon.html";
			})
			$('.ddBtn').on('click', function() { //我的订单
				window.location.href = "order.html";
			})
			$('.kbBtn').on('click', function() { //支付宝卡包
				window.location.href = "alipays://platformapi/startapp?appId=20000021&a=lb&b=c";
			})


			$('.content').on('click', '.contentList', function() { //商品点击
				//alert($(this).attr('deta-id'))
				window.location.href = "goodsDetails.html?id=" + $(this).attr('deta-id');
			})
		})
	</script>
</html>
